<script lang="ts" setup>
import _ from 'lodash';
import { tryit } from 'radash';
import { FormInstanceFunctions, MessagePlugin } from 'tdesign-vue-next';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import mockApi from '@/api/mock';
import { PostData, ResultItem } from '@/api/model/mockModel';
import { SUCCESS_CODE } from '@/constants';
import { useLoading } from '@/hooks/useLoading';

import { FORM_RULES, INIT_DATA, list as INIT_FORM_LIST } from '../data/GB28181';

const route = useRoute();
const router = useRouter();

const containerRef = ref<HTMLDivElement>();
const list = ref(_.cloneDeep(INIT_FORM_LIST));
const formData = ref({ ...INIT_DATA });
const detailData = ref<ResultItem>();
const formRef = ref<FormInstanceFunctions>();

const { loadingStart, loadingEnd } = useLoading(containerRef);

// 设置数据
const setData = (data: ResultItem) => {
  detailData.value = _.cloneDeep(data);
  const changeData: any = {
    ga1400: true,
    name: 'asd',
    address: { code: '210304', address: 'dwadadawdad', codeLabel: '立山区' },
    ip: '192.168.101.100',
    time: [],
    date: '2024-04-18 12:00:00',
    face: 50,
  };
  formData.value = { ...data, ...changeData };
};

const getData = async () => {
  const id = route.query.id as string;
  if (!id) return;
  loadingStart();
  const [err, res] = await tryit(mockApi.info)({ id });
  if (!err && res.code === SUCCESS_CODE) setData(res.data);
  loadingEnd();
};

const handleCancel = () => {
  router.go(-1);
};

const handelSubmit = async () => {
  const validateRes = await formRef.value.validate();

  if (validateRes === true) {
    loadingStart();

    const postData: PostData = { ...formData.value };
    const id = detailData.value?.id;
    const api = id ? mockApi.update : mockApi.create;

    if (id) postData.id = id;

    const [err, res] = await tryit(api)(postData);

    if (!err && res.code === SUCCESS_CODE) {
      await MessagePlugin.success('操作成功');
      handleCancel();
    }

    loadingEnd();
  }
};

onMounted(() => {
  getData();
});
</script>

<template>
  <div ref="containerRef" class="GA1400-data-wrap">
    <!-- <div class="switch-box">
      <div class="switch-label">GB28181启用禁用</div>
      <t-switch size="large" :label="['开', '关']"></t-switch>
    </div> -->
    <div class="common-scrollbar form-wrap full">
      <t-form
        ref="formRef"
        :rules="FORM_RULES"
        class="form"
        :data="formData"
        :colon="true"
        :label-width="100"
        label-align="left"
      >
        <div class="common-item-view">
          <div class="common-item-view-box">
            <div class="common-item-view-box-item" v-for="(item, index) in list" :key="index">
              <div class="item">
                <form-item :form-data="formData" :data="item"> </form-item>
              </div>
            </div>
          </div>
        </div>
      </t-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
.GA1400-data-wrap {
  width: 100%;
  height: 100%;
  .switch-box {
    display: flex;
    font-size: 12px;
    .switch-label {
      width: 120px;
      margin-left: 18px;
    }
  }
  .form {
    width: 100%;
    height: 100%;
    .common-item-view {
      width: 100%;
      height: 100%;
      padding: 10px 18px;
      .common-item-view-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        position: relative;
        padding-top: 60px;
        .common-item-view-box-item {
          margin: 13px 0;
          &:first-of-type {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
    }
  }

  .item {
    :deep(.t-form__label) {
      width: 120px !important;
      text-align: end;
      margin-right: 13px;
      padding-right: 0 !important;

      label {
        font-size: 12px !important;
        text-align: end;
      }
    }
    :deep(.t-form__controls-content) {
      width: 230px !important;
    }
  }
}
</style>
